<!--  -->
<template>
  <div class="area-plan">
    <div v-if="isShowPlan">
      <div class="header">
        <span class="electrical_on"></span><span>区域用电器使用中</span>
        <span class="electrical_off"></span><span>区域无用电器使用</span>
        <el-tooltip effect="dark" content="切换到列表" placement="top-start">
          <div
            class="change-icon electrical_icon"
            @click="
              isShowPlan = false;
              areaCountShow1 = true;
            "
          >
            <img :src="require('@/assets/icons/icon-change.png')" />
          </div>
        </el-tooltip>
      </div>

      
    </div>
    <div class="organ-info" v-else>
      <user-operation
        :organId="isarea.organId"
        :isShowPlan="isShowPlan"
        :areaId="isarea.id"
        :areaType="isarea.type"
        v-on:changeShowPlan="changeShowPlan($event)"
      ></user-operation>
    </div>
    <div class="content-bottom" v-show="this.areaCountShow1">
      <!-- 区域统计-->
      <div class="left" ref="areaCount" v-if="this.areaCountShow">
        <!--设备数统计-->

        <div class="probe-number-chart">
          <probes-number-pie-chart
            :pieChartData="probesNumberPieChartData"
          ></probes-number-pie-chart>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
        <!-- 电器数统计 -->
        <div class="electric-appliance-chart">
          <electric-appliances-number-pie-chart
            :pieChartData="electricAppliancesNumberPieChartData"
          ></electric-appliances-number-pie-chart>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
      </div>

      <div
        ref="channelInfo"
        v-if="!this.areaCountShow"
        class="left"
        :class="!this.areaCountShow ? 'datalist-pile-table' : ''"
      >
        <div v-if="this.electricalappliancesshow">
          <!--控制记录-->
          <div class="probe-number-chart">
               <el-table
              ref="table"
              :key="channelControlRecordkey"
              :data="channelControlRecord"
              style="width: 100%;"
              :cell-style="{ background: 'transparent' }"
              height="3.25rem"
              class="userprobe-number-table"
           
            >
             <el-table-column label="操作记录" align="center">
                <template #header>
                  <span>{{ probenamecon }}操作记录</span>
                </template>
                <el-table-column label="操作人" prop="userName" />
                <el-table-column label="操作时间" width="180" prop="createTime" />
                <el-table-column label="开关状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.state == 1">打开</span>
                    <span v-if="scope.row.state == 0">关闭</span>
                  </template>
                </el-table-column>
              </el-table-column>
            
            </el-table>
          
            <div class="tl-corner"></div>
            <div class="tr-corner"></div>
            <div class="bl-corner"></div>
            <div class="br-corner"></div>
          </div>
          <!-- 上下线记录 -->
          <div class="electric-appliance-chart"  >
            <el-table
              :data="channelStatusRecord"
              style="width: 100%; height: 100%"
              :cell-style="{ background: 'transparent' }"
              :max-height="tableHeight"
              class="userprobe-number-table"
             
              >
               <!-- v-if="probeKindCode!=202" -->
              <el-table-column label="操作记录" align="center">
                <template #header>
                  <span>{{ probenamecon }}事件记录</span>
                  <el-radio-group style="margin-left:15px" v-if="probetargetCategoryId==20" v-model="Threechannel" @change="Threechannelchannge" size="mini" >
                    <el-radio-button :label="1">A相</el-radio-button>
                    <el-radio-button :label="2">B相</el-radio-button>
                    <el-radio-button :label="3">C相</el-radio-button>
                  </el-radio-group>
                </template>
                <el-table-column label="上报事件">
                  <template slot-scope="scope">
                    <!-- <span>{{ probetargetCategoryId }}</span> -->
                     <span v-if="scope.row.onOff == -1">重置报警状态</span>
                    <span v-if="scope.row.onOff == 1">打开</span>
                    <span v-if="scope.row.onOff == 0">关闭</span>
                    <span v-if="scope.row.onOff == 3">欠压</span>
                    <span v-if="scope.row.onOff == 4">欠压恢复</span>
                    <span v-if="scope.row.onOff == 5">过压</span>
                    <span v-if="scope.row.onOff == 6">过压恢复</span>
                    <span v-if="scope.row.onOff == 7">过载</span>
                    <span v-if="scope.row.onOff == 8">过载恢复</span>
                    <span v-if="scope.row.onOff == 9">超温</span>
                    <span v-if="scope.row.onOff == 10">超温恢复</span>
                    <span v-if="scope.row.onOff == 15">低功率运行</span>
                    <span v-if="scope.row.onOff == 16">低功率恢复</span>
                    <span v-if="scope.row.onOff == 18">温度恢复</span>
                    <span v-if="scope.row.onOff == 19">温度告警</span>
                    <span v-if="scope.row.onOff == 30">功率恢复</span>
                    <span v-if="scope.row.onOff == 31">功率过载</span>
                    <span v-if="scope.row.onOff == 32">防拆报警</span>
                    <span v-if="scope.row.onOff == 48">有人告警</span>
                    <span v-if="scope.row.onOff == 49">无人恢复</span>
                    <span v-if="scope.row.onOff == 50">防拆恢复</span>
                    <span v-if="scope.row.onOff == 32769">断电</span>
                    <span v-if="scope.row.onOff == 32768">失联</span>
                  </template>
                </el-table-column>
                <el-table-column label="上报时间" width="180" prop="createTime" />
                <el-table-column label="上报通道" prop="channel" />
              </el-table-column>
            </el-table>
              <!-- <el-table
              ref="table"
              :key="channelStatusRecordkey"
              :data="channelStatusRecord"
              style="width: 100%; height: 100%"
              :cell-style="{ background: 'transparent' }"
              :max-height="tableHeight"
              class="userprobe-number-table"
              v-if="probeKindCode==202"
            >
               <el-table-column label="事件记录" align="center">
                <template #header>
                  <span>{{ probenamecon }}事件记录</span>
                </template>
                <el-table-column label="操作人" prop="user_name" />
                <el-table-column label="操作时间" width="180" prop="create_time" />
                <el-table-column label="事件记录" prop="event_content">
               
                </el-table-column>
              </el-table-column>
            </el-table> -->
            <div class="tl-corner"></div>
            <div class="tr-corner"></div>
            <div class="bl-corner"></div>
            <div class="br-corner"></div>
          </div>


             <div class="electric-appliance-chart" style="left:0;display:none"  >
            <el-table
              :data="eventRecord"
              style="width: 100%; height: 100%"
              :cell-style="{ background: 'transparent' }"
              :max-height="330"
              class="userprobe-number-table"
             
              >
               <!-- v-if="probeKindCode!=202" -->
              <el-table-column label="操作记录" align="center">
                <template #header>
                  <span>{{ probenamecon }}事件操作记录</span>
                  <el-radio-group style="margin-left:15px" v-if="probetargetCategoryId==20" v-model="Threechannel" @change="Threechannelchannge" size="mini" >
                    <el-radio-button :label="1">A相</el-radio-button>
                    <el-radio-button :label="2">B相</el-radio-button>
                    <el-radio-button :label="3">C相</el-radio-button>
                  </el-radio-group>
                </template>
                 <el-table-column type="index" label="序号" width="50">
        </el-table-column>
                <el-table-column label="操作人" prop="userName" />
                <el-table-column label="事件">
                  <template slot-scope="scope">
                    <!-- <span>{{ probetargetCategoryId }}</span> -->
                    <span v-if="scope.row.type == 1">下发</span>
                    <span v-if="scope.row.onOff == -1">重置报警状态</span>
                    <span v-if="scope.row.onOff == 1">打开</span>
                    <span v-if="scope.row.onOff == 0">关闭</span>
                    <span v-if="scope.row.onOff == 3">欠压</span>
                    <span v-if="scope.row.onOff == 4">欠压恢复</span>
                    <span v-if="scope.row.onOff == 5">过压</span>
                    <span v-if="scope.row.onOff == 6">过压恢复</span>
                    <span v-if="scope.row.onOff == 7">过载</span>
                    <span v-if="scope.row.onOff == 8">过载恢复</span>
                    <span v-if="scope.row.onOff == 9">超温</span>
                    <span v-if="scope.row.onOff == 10">超温恢复</span>
                    <span v-if="scope.row.onOff == 15">低功率运行</span>
                    <span v-if="scope.row.onOff == 16">低功率恢复</span>
                    <span v-if="scope.row.onOff == 18">温度恢复</span>
                    <span v-if="scope.row.onOff == 19">温度告警</span>
                    <span v-if="scope.row.onOff == 30">功率恢复</span>
                    <span v-if="scope.row.onOff == 31">功率过载</span>
                    <span v-if="scope.row.onOff == 32">防拆报警</span>
                    <span v-if="scope.row.onOff == 48">有人告警</span>
                    <span v-if="scope.row.onOff == 49">无人恢复</span>
                    <span v-if="scope.row.onOff == 50">防拆恢复</span>
                    <span v-if="scope.row.onOff == 32769">断电</span>
                    <span v-if="scope.row.onOff == 32768">失联</span>
                  </template>
                </el-table-column>
                <el-table-column label="时间" width="180" prop="createTime" />
                <el-table-column label="通道" prop="channel" />
              </el-table-column>
            </el-table>
           
            <div class="tl-corner"></div>
            <div class="tr-corner"></div>
            <div class="bl-corner"></div>
            <div class="br-corner"></div>
          </div>
        </div>
          <!-- 充电插座事件 -->
          <div v-if="!this.electricalappliancesshow" >
          <div class="probe-number-chart probe-number-BatteryEventtable">
            <el-table
              ref="table"
              :key="BatteryEventtablekey"
              :data="BatteryEventtable"
              style="width: 100%; height: 100%"
              :cell-style="{ background: 'transparent' }"
              :max-height="tableHeight"
              class="userprobe-number-table"
            >
              <el-table-column label="事件记录" align="center">
                <template #header>
                  <span>{{ probenamecon }}号充电桩事件</span>
                </template>
                <el-table-column
                  align="center"
                  type="index"
                  :index="indexMethod"
                 
                ></el-table-column>
                <el-table-column label="事件内容" prop="eventContent" />
                <el-table-column label="操作人" prop="userName" />

                <el-table-column
                  label="事件时间"
                
                  prop="create_time"
                >
                 <template slot-scope="scope">
                    <span>{{scope.row.createTime.slice(2, 16)}}</span>
                  </template>
            
                 </el-table-column>
                 <el-table-column label="温度" prop="st" >
                 <template slot-scope="scope">
                    <span>{{scope.row.st}}</span>
                  </template>
            
                 </el-table-column>
                <el-table-column label="用电量(度)" prop="quota" >
                 <template slot-scope="scope">
                    <span>{{scope.row.quota| toUpperCase()}}</span>
                  </template>
            
                 </el-table-column>
                <el-table-column label="电压(V)" prop="sv" />
               
              </el-table-column>
            </el-table>
            <div class="tl-corner"></div>
            <div class="tr-corner"></div>
            <div class="bl-corner"></div>
            <div class="br-corner"></div>
          </div>
        </div>
      </div>
      <!--用电量统计-->
      <div class="electricity-quantity-chart">
        <div
          v-if="
            this.electricalappliancesshow && this.probetargetCategoryId == 12
          "
        >
          <el-table
            :data="loralockeventdata"
            style="width: 100%;"
            :cell-style="{ background: 'transparent' }"
            :max-height="tableHeight"
             height="3.25rem"
            class="userprobe-number-table"
            >
            <el-table-column label="操作记录" align="center">
              <template #header>
                <span>{{ probenamecon }}本地记录</span>
              </template>
              <el-table-column label="操作人" prop="userName"> </el-table-column>
              <el-table-column
                label="事件时间"
                width="180"
                prop="createTime"
              />
              <el-table-column label="事件内容" prop="eventContent" />
            </el-table-column>
          </el-table>
        </div>
        <el-radio-group style="margin-left:15px;position: absolute;right: 0.1rem;top: 0.1rem;z-index: 1;" v-if="probetargetCategoryId==20" v-model="Threechannelele" @change="Threechannelelechannge" size="mini" >
          <el-radio-button :label="1">A相</el-radio-button>
          <el-radio-button :label="2">B相</el-radio-button>
          <el-radio-button :label="3">C相</el-radio-button>
        </el-radio-group>
        <electric-quantity-bar-chart
          :barChartData="electricQuantityBarChartData"
          v-if="
            this.electricalappliancesshow && this.probetargetCategoryId != 12
          "
        ></electric-quantity-bar-chart>
        <charging-socket-discount-chart
          :chargingsocketdiscountid="chargingsocketdiscountid"
          v-if="!this.electricalappliancesshow"
        ></charging-socket-discount-chart>
        <div class="tl-corner"></div>
        <div class="tr-corner"></div>
        <div class="bl-corner"></div>
        <div class="br-corner"></div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import ajax from "@/utils/ajax";
import UserOperation from "./UserOperation.vue";

import ProbesNumberPieChart from "@/pages/admin/components/ProbeNumberPieChart";
import ElectricAppliancesNumberPieChart from "@/pages/admin/components/ElectricAppliancesNumberPieChart";
import ElectricQuantityBarChart from "@/pages/admin/components/ElectricQunantityBarChart";
import ChargingSocketDiscountChart from "@/pages/admin/components/ChargingSocketDiscountChart";

export default {
  name: "AreaPlan",
  //import引入的组件需要注入到对象中才能使用
  components: {
    UserOperation,
    ProbesNumberPieChart,
    ElectricAppliancesNumberPieChart,
    ElectricQuantityBarChart,
    ChargingSocketDiscountChart,
  },
  props: {
    area: {
      type: Object,
      require: true,
    },
  },
  data() {
    //这里存放数据
    return {
      isarea: {},
      areaCountShow1: true,
      isShowAirConditionDialog: false,
      isShowSwitchDialog: false,
      isShowLightDialog: false,
      airconditionObject: {},
      airSensorData: {},
      speedGear: "",
      modeText: "",
      switchObj: {},
      probeSwitchName: "测试开灌灌灌灌呱呱呱呱呱呱呱呱呱",
      otherObj: {},
      otherSensorData: {},
      imgUrl: "",
      probes: [],
      cProbes: [],
      value: "",
      isShowPlan: false,
      baseUrl: "",
      probesNumberPieChartData: [],
      electricAppliancesNumberPieChartData: [],
      electricQuantityBarChartData: [],
      probename: "",
      probetargetCategoryId: -1,
      probeKindCode: -1,
      areaCountShow: true,
      electricalappliancesshow: true,
      tableHeight: 330,
      channelStatusRecord: [],
      channelControlRecord: [],
      channelControlRecordkey: -1,
      BatteryEventtable: [],
      BatteryEventtableleg: -1,
      BatteryEventtablekey: -1,
      chargingsocketdiscountid: -1,
      loralockeventdata: [],
      judge: { swtich: true },
      NodeClass: ["myred", "myger", "myblue"],
      BasicSwich: false,
      BasicInfo: {},
      labelClassName: "bg-color-orange",
      organizedata: {},
      Threechannel:1,
      Threechannelid:null,
      Threechannelele:1,
      Threechanneleleid:null,
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.isarea = this.area;
    //console.log("区域数据:", this.area);
    // this.getFilialeProbesNumber(this.isarea);
    // this.getFilialeHostsNumber(this.isarea);
    //this.getFilialeElectricQuantity(this.isarea);
    //this.getAreaProbePlan();
    let base = window.location.href;
    this.baseUrl = base.substring(0, base.indexOf("shike3k") - 1);
    //this.getorganizedata();
  },
  watch: {
    channelStatusRecord(val) {
      this.$nextTick(() => {
        this.tableHeight = this.$refs.table.layout.tableHeight;
      });
    },
  },
  filters: {
    toUpperCase(number) {
      number = parseFloat(number / 1000);
      if (number >= 100) {
        number = number.toFixed(0);
      } else if (number >= 10) {
        number = number.toFixed(1);
      } else if (number > 0) {
        number = number.toFixed(2);
      } else if (number === 0) {
        number = number.toFixed(2);
      }
      return number;
    },
  },
  computed: {
    probenamecon() {
      // console.log(this.probename);
      return this.probename;
    },
    // 是否允许增加空调温度
    isAllowAdd() {
      return this.airconditionObject.temperature < 31;
    },

    // 是否允许降低空调温度
    isAllowSub() {
      return this.airconditionObject.temperature > 16;
    },
    // 在线风扇数量
    onlineFanCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (probe.probeKindCode === 202 && probe.status === "1") count++;
        });
      }
      return count;
    },

    // 风扇数量
    fanCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (probe.probeKindCode === 202) count++;
        });
      }
      return count;
    },

    // 在线空调数量
    onlineAirCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (
            (probe.probeKindCode === 301 || probe.probeKindCode === 401) &&
            probe.status === "1"
          )
            count++;
        });
      }
      return count;
    },

    // 空调数量
    airCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (probe.probeKindCode === 301 || probe.probeKindCode === 401)
            count++;
        });
      }
      return count;
    },

    // 在线灯数量
    onlineLightCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (probe.probeKindCode === 110 && probe.status === "1") count++;
        });
      }
      return count;
    },

    // 灯数量
    lightCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (probe.probeKindCode === 110) count++;
        });
      }
      return count;
    },

    // 在线开关数量
    onlineSwitchCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (
            (probe.probeKindCode === 101 ||
              probe.probeKindCode === 102 ||
              probe.probeKindCode === 103 ||
              probe.probeKindCode === 104) &&
            probe.status === "1"
          )
            count++;
        });
      }
      return count;
    },

    // 开关数量
    switchCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (
            probe.probeKindCode === 101 ||
            probe.probeKindCode === 102 ||
            probe.probeKindCode === 103 ||
            probe.probeKindCode === 104
          )
            count++;
        });
      }
      return count;
    },

    // 失联数量
    loseCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (probe.status === "2") count++;
        });
      }
      return count;
    },

    // 断电数量
    powerOutagesCount() {
      let probes = this.probes;
      let count = 0;
      if (probes !== undefined) {
        probes.forEach((probe) => {
          if (probe.status === "3") count++;
        });
      }
      return count;
    },
    eventRecord(){
      const data=[...this.channelStatusRecord,...this.channelControlRecord]
      let list = data.sort((n1, n2) => {
        return new Date(n2.createTime) - new Date(n1.createTime);
      })
      .map(item =>{
        const type= item.userName?1:0 
        return {
          type:type,
          userName:type==1?item.userName:'设备上报',
          createTime:item.createTime,
          onOff:type==1?item.state:item.onOff,
          channel:item.channel
        }
      })      
      return list
    }
  },

  //方法集合
  methods: {
    // 切换为平面图模式
    changeShowPlan(state) {
      this.isShowPlan = state;
      this.areaCountShow1 = false;
    },

    // 返回 '在线' '离线' '失联' '断电'
    returnStatusName(status) {
      switch (status) {
        case "0":
          return "离线";
        case "1":
          return "在线";
        case "2":
          return "失联";
        case "3":
          return "断电";
      }
    },
    // 计算坐标在一起的探头
    setCProbes() {
      let probes = [];
      probes.push(...this.probes);
      let finalList = [];
      if (probes.length > 0) {
        for (let i = 0; i < probes.length; i++) {
          let p = probes[i];
          let x = p.x;
          let y = p.y;
          let probeList = [];
          probes.forEach((probe) => {
            if (x === probe.x && y === probe.y) {
              probeList.push(probe);
            }
          });
          let probeObj = {};
          probeObj.x = x;
          probeObj.y = y;
          probeObj.id = p.id;
          probeObj.name = p.name;
          probeObj.status = p.status;
          probeObj.probes = probeList;
          finalList.push(probeObj);
        }
        for (let i = 0; i < finalList.length; i++) {
          let po_i = finalList[i];
          for (let j = i + 1; j < finalList.length; j++) {
            let po_j = finalList[j];
            if (po_i.x === po_j.x && po_i.y === po_j.y) {
              finalList.splice(j, 1);
            }
          }
        }
        this.cProbes = finalList;
      }
    },
    // 更改电器
    changeName(value) {
      let p = {};
      this.probes.forEach((probe) => {
        if (probe.id === value) {
          p = probe;
        }
      });
      let cProbes = this.cProbes;
      cProbes.forEach((c) => {
        if (c.x === p.x && c.y === p.y) {
          c.id = p.id;
          c.name = p.name;
          c.status = p.status;
        }
      });
      this.cProbes = cProbes;
      this.onClickProbeIcon(p);
    },
    // 修改其他电器状态
    modifySwitchOperation(probeChannel, state, type) {
      ajax.post({
        url: this.$API.addProbeOperation,
        data: {
          id: probeChannel.probeId,
          channel: probeChannel.channel,
          state: state,
          controlCode: probeChannel.chontrolCode,
        },
        success: (resp) => {
          if (type === "switch") {
            this.switchObj.forEach((s) => {
              if (
                s.probeId === probeChannel.probeId &&
                s.channel === probeChannel.channel
              ) {
                s.open = state === 1 ? true : false;
              }
            });
          } else {
            this.otherObj.open = state === 1 ? true : false;
          }
          this.$message({
            message: "修改电器状态成功",
            type: "success",
          });
        },
        error: (error) => {
          this.$message({
            message: error.message,
            type: "error",
          });
        },
      });
    },
    // 修改空调状态
    modifyAirConditionOperation(chooseType, value) {
      let id = this.airconditionObject.probeId;
      let L = 1;
      let C = this.airconditionObject.controlCode;
      let S = this.airconditionObject.open ? "255" : "0";
      let M = this.airconditionObject.mode;
      let T = this.airconditionObject.temperature;
      let W = this.airconditionObject.speed;
      let D = this.airconditionObject.direction;
      switch (chooseType) {
        case "S":
          S = value;
          break;
        case "M":
          M = value;
          break;
        case "T":
          T = value;
          break;
        case "W":
          W = value;
          break;
        case "D":
          D = value;
          break;
      }
      ajax.post({
        url: this.$API.addAirConditionOperation,
        data: {
          id: id,
          type: chooseType,
          L: L,
          C: C,
          S: S,
          M: M,
          T: T,
          W: W,
          D: D,
        },
        success: (resp) => {
          switch (chooseType) {
            case "S":
              this.airconditionObject.open = value == 255 ? true : false;
              if (value == 255) {
                this.$message({
                  message: "开启空调成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "关闭空调成功",
                  type: "success",
                });
              }

              break;
            case "M":
              this.airconditionObject.mode = value;
              this.$message({
                message: "控制空调模式成功",
                type: "success",
              });
              break;
            case "T":
              this.airconditionObject.temperature = value;
              this.$message({
                message: "控制空调温度成功",
                type: "success",
              });
              break;
            case "W":
              this.airconditionObject.speed = value;
              this.$message({
                message: "控制空调风速成功",
                type: "success",
              });
              break;
            case "D":
              this.airconditionObject.direction = value;
              this.$message({
                message: "控制空调摆风模式成功",
                type: "success",
              });
              break;
          }
        },
        error: (error) => {
          this.$message({
            message: error.message,
            type: "error",
          });
        },
      });
    },

    // 改变灯或风扇的状态
    changeLightState(type) {
      if (type === "open") {
        if (this.otherObj.open === false) {
          this.modifySwitchOperation(this.otherObj, 1);
        }
      } else {
        if (this.otherObj.open === true) {
          this.modifySwitchOperation(this.otherObj, 0);
        }
      }
    },

    // 获取灯或风扇图标
    getLightOrFanIcon(otherObj) {
      let code = otherObj.probeKindCode;
      if (otherObj.open) {
        switch (code) {
          case 110:
            return require("@/assets/icons/light-on.png");
          case 201:
          case 202:
            return require("@/assets/icons/fan-on.png");
        }
      } else {
        switch (code) {
          case 110:
            return require("@/assets/icons/light-off.png");
          case 201:
          case 202:
            return require("@/assets/icons/fan-off.png");
        }
      }
    },

    // 点击探头图标时
    onClickProbeIcon(id) {
      let probe = {};
      this.probes.forEach((p) => {
        if (p.id === id) {
          probe = p;
        }
      });
      let code = probe.probeKindCode;
      if (probe.status === "0") {
        this.$message({
          message: "该探头处于离线状态",
          type: "warning",
        });
        return;
      }
      switch (code) {
        case 101:
        case 102:
        case 103:
        case 104:
          this.probeSwitchName = probe.name;
          this.switchObj = probe.channelList;
          this.isShowSwitchDialog = true;
          break;
        case 110:
          this.getSensorData(probe.id);
          this.otherObj = probe.channelList[0];
          this.otherObj.probeKindCode = code;
          this.otherObj.hasSensorData = true;
          this.isShowLightDialog = true;
          break;
        case 201:
          this.otherObj = probe.channelList[0];
          this.otherObj.probeKindCode = code;
          this.isShowLightDialog = true;
          break;
        case 202:
          this.getSensorData(probe.id);
          this.otherObj = probe.channelList[0];
          this.otherObj.probeKindCode = code;
          this.otherObj.hasSensorData = true;
          this.isShowLightDialog = true;
          break;
        case 301:
          this.airconditionObject = probe.channelList[0];
          this.airconditionObject.hasSensorData = false;
          this.isShowAirConditionDialog = true;
          break;
        case 401:
          this.getSensorData(probe.id, "air");
          this.airconditionObject = probe.channelList[0];
          this.airconditionObject.hasSensorData = true;
          this.isShowAirConditionDialog = true;
      }
    },

    // 返回对应的探头图标
    getProbeIcon(id) {
      let probe = {};
      this.probes.forEach((p) => {
        if (p.id === id) {
          probe = p;
        }
      });
      let code = probe.probeKindCode;
      switch (code) {
        case 101:
          return require("@/assets/icons/one-switch.png");
        case 102:
          return require("@/assets/icons/two-switch.png");
        case 103:
          return require("@/assets/icons/three-switch.png");
        case 104:
          return require("@/assets/icons/four-switch.png");
        case 110:
          return require("@/assets/icons/light.png");
        case 202:
          return require("@/assets/icons/fan.png");
        case 301:
        case 401:
          return require("@/assets/icons/air.png");
      }
    },

    // 获取区域探头图片
    getAreaProbePlan() {
      ajax.post({
        url: this.$API.getAreaProbePlan,
        data: {
          id: this.isarea.id,
        },
        success: (resp) => {
          if (resp.data.areaProbePlan) {
            this.imgUrl = this.baseUrl + resp.data.areaProbePlan.url;

            console.log(this.imgUrl);
            this.probes = resp.data.probes;
            this.setCProbes();
          } else {
            this.probes = [];
          }
        },
        error: (error) => {
          this.$message({
            message: error.message,
            type: "error",
          });
        },
      });
    },

    // 获取探头通道信息
    getProbeChannelInfo(id, type) {
      let hasSensorData = this.airconditionObject.hasSensorData;
      ajax.post({
        url: this.$API.getAreaPlanProbeChannel,
        data: {
          id: id,
        },
        success: (resp) => {
          let data = resp.data[0];
          if (type === "air") {
            console.log(resp.data[0]);
            this.airconditionObject = data;
            if (hasSensorData) {
              this.getSensorData(id, "air");
            }
          } else if (type === "switch") {
            this.switchObj = resp.data;
          } else if (type === "other") {
            this.otherObj = data;
            this.getSensorData(id);
          }
        },
        error: (error) => {
          this.$message({
            message: error.message,
            type: "error",
          });
        },
      });
    },

    // 获取传感数据
    getSensorData(id, type) {
      ajax.post({
        url: this.$API.getSensorData,
        data: {
          id: id,
        },
        success: (resp) => {
          if (type === "air") {
            this.airSensorData = resp.data;
            this.airconditionObject.hasSensorData = true;
          } else {
            this.otherSensorData = resp.data;
            this.otherSensorData.hasSensorData = true;
          }
        },
        error: (error) => {
          this.$message({
            message: error.message,
            type: "error",
          });
        },
      });
    },
    indexMethod(index) {
      return this.BatteryEventtableleg - index;
    },
    // 获取风速图标
    getSpeedIcon(airconditionObject) {
      let speed = airconditionObject.speed;
      switch (speed) {
        case 0:
          this.speedGear = "自动";
          return require("@/assets/icons/auto-wind-speed.png");
        case 1:
          this.speedGear = "一档";
          return require("@/assets/icons/speed-one-gear.png");
        case 2:
          this.speedGear = "二档";
          return require("@/assets/icons/speed-second-gear.png");
        case 3:
          this.speedGear = "三档";
          return require("@/assets/icons/speed-three-gear.png");
      }
    },

    // 获取模式图标
    getModeIcon(airconditionObject) {
      let mode = airconditionObject.mode;
      switch (mode) {
        case 0:
          this.modeText = "自动";
          return require("@/assets/icons/auto.png");
        case 1:
          this.modeText = "制冷";
          return require("@/assets/icons/refrigeration.png");
        case 2:
          this.modeText = "除湿";
          return require("@/assets/icons/dehumidification.png");
        case 3:
          this.modeText = "送风";
          return require("@/assets/icons/air-supply.png");
        case 4:
          this.modeText = "制暖";
          return require("@/assets/icons/heating.png");
      }
    },

    // 控制空调开关
    changeOpenState(val) {
      let probes = this.probes;
      let probeId = this.airconditionObject.probeId;
      probes.forEach((item) => {
        if (probeId === item.id) {
          // probe = item;
        }
      });
      if (val === "close") {
        if (this.airconditionObject.open === true) {
          this.modifyAirConditionOperation("S", 0);
        }
      } else {
        if (this.airconditionObject.open === false) {
          this.modifyAirConditionOperation("S", 255);
        }
      }
    },

    // 控制空调模式
    changeMode(val) {
      this.modifyAirConditionOperation("M", val);
    },

    // 控制空调摆风
    changeDirection() {
      if (this.airconditionObject.direction === 0) {
        this.modifyAirConditionOperation("D", 1);
      } else {
        this.modifyAirConditionOperation("D", 0);
      }
    },

    // 控制空调风速
    changeSpeed() {
      if (this.airconditionObject.speed < 3) {
        let speed = this.airconditionObject.speed + 1;
        this.modifyAirConditionOperation("W", speed);
      } else {
        this.modifyAirConditionOperation("W", 0);
      }
    },

    // 控制空调温度
    changeTemperature(val) {
      if (val === "add") {
        if (this.airconditionObject.temperature < 31) {
          let temperature = this.airconditionObject.temperature + 1;
          this.modifyAirConditionOperation("T", temperature);
        }
      } else {
        if (this.airconditionObject.temperature > 16) {
          let temperature = this.airconditionObject.temperature - 1;
          this.modifyAirConditionOperation("T", temperature);
        }
      }
    },

    // 控制开关状态
    changeSwitchState(item, val) {
      let channel = item.channel;
      let switchObj = this.switchObj;
      let index = 0;
      for (let i = 0; i < switchObj.length; i++) {
        if (switchObj[i].channel === channel) {
          index = i;
        }
      }
      if (val === "open") {
        if (this.switchObj[index].open === false) {
          this.modifySwitchOperation(item, 1, "switch");
          this.switchObj[index].open = true;
        }
      } else {
        if (this.switchObj[index].open === true) {
          this.modifySwitchOperation(item, 0, "switch");
        }
      }
    },

    //根据网点获取用电量统计数据
    getFilialeElectricQuantity(data) {
      let self = this;
      let geturl;
      if (self.$store.getters.user.manager == 2) {
        geturl = self.$API.getFilialeElectricQuantity;
      } else {
        geturl = self.$API.getElectricityQuantityStatisticByUserId;
      }
      ajax.post({
        url: geturl,
        data: {
          id: data.id,
          filialeOrOrgan: data.type,
        },
        success: (res) => {
          // console.log('用电量数据', res.data)
          this.electricQuantityBarChartData = res.data;
        },
        error: (err) => {
          self.$message.error(err.message);
          console.log(err);
        },
      });
    },
    // 根据网点获取电器数量统计数据
    getFilialeHostsNumber(data) {
      let self = this;
      let obj = (obj = { id: data.id, type: data.type });
      let geturl;
      if (self.$store.getters.user.manager == 2) {
        geturl =
          "/shike3k/user/webrest/v3.3/electricity/web/filiale/electric_category_count/query";
      } else {
        geturl = this.$API.queryElectricCategoryCountByUserId;
      }
      ajax.post({
        //url: "/shike3k-user/webrest/v3.3/electricity/web/filiale/electric_category_count/query",
        url: geturl,
        data: obj,
        success: (res) => {
          this.electricAppliancesNumberPieChartData = res.data;
        },
        error: (err) => {
          self.$message.error(err.message);
          console.log(err);
        },
      });
    },
    //根据网点获取探头数量统计数据
    getorganizedata() {
      let self = this;

      ajax.post({
        url: this.$API.getOrganize,
        data: { id: this.$store.getters.filiale },
        success: (res) => {
          this.organizedata = res.data;
        },
        error: (err) => {
          self.$message.error(err.message);
          console.log(err);
        },
      });
    },
    //根据网点获取探头数量统计数据
    getFilialeProbesNumber(data) {
      // console.log(data);
      let self = this;
      let obj = (obj = { id: data.id, type: data.type });
      let geturl;
      if (self.$store.getters.user.manager == 2) {
        geturl =
          "/shike3k-user/webrest/v3.3/electricity/web/filiale/device_count_by_filter/get";
      } else {
        geturl = this.$API.getDeviceCountByUserId;
      }
      ajax.post({
        //url: "/shike3k-user/webrest/v3.3/electricity/web/filiale/device_count_by_filter/get",
        url: geturl,
        data: obj,
        success: (res) => {
          this.probesNumberPieChartData = res.data;
        },
        error: (err) => {
          self.$message.error(err.message);
          console.log(err);
        },
      });
    },
    showBatteryEvent(value) {
      console.log(value);
      this.areaCountShow = false;
      this.electricalappliancesshow = value.electricalappliancesshow;
      let self = this;
      self.probename = value.probename.split("-").slice(-1)[0];
      ajax.get({
        url: this.$API.getProbeBatteryEventByProbeId + value.probeId,
        success: (response) => {
          // console.log(response)
          //  console.log(response)
          //  self.BatteryEventtable=response.data
          self.BatteryEventtable = [];
          self.$nextTick(() => {
            for (let item of response.data) {
              if (
                self.BatteryEventtable.find(
                  (data) => data.createTime == item.createTime
                ) == undefined
              ) {
                self.BatteryEventtable.push(item);
              }
            }
            self.BatteryEventtableleg = self.BatteryEventtable.length;
          });
          // console.log( self.BatteryEventtable)

          self.BatteryEventtablekey = value.probeId;
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
      this.chargingsocketdiscountid = value.probeId;
    },

    showChnnelInfo(value) {
      console.log(value);
      this.areaCountShow = false;
      this.areaCountShow1 = true;
      this.electricalappliancesshow = value.electricalappliancesshow;
      let self = this;
      self.probename = value.probename;
      self.probetargetCategoryId = value.targetCategoryId;
      self.probeKindCode = value.probeKindCode;
      self.Threechannel=value.channel
      self.Threechannelid=value.probeId
      self.Threechannelele=value.channel
      self.Threechanneleleid=value.probeId
      ajax.get({
        url: this.$API.getProbeControlRecord +`${value.probeId}/${value.channel}`,
        success: (res) => {
          self.channelControlRecord = res.data;
          self.channelControlRecordkey = value.probeId;
          // console.log(self.channelControlRecordkey);
        },
        error: (err) => {
          console.log(err);
        },
      });

      // if (value.probeKindCode == 202) {
      //   ajax.post({
      //     url: this.$API.getBatteryEventList,
      //     data: { probeId: value.probeId },
      //     success: (response) => {
      //       // console.log(response)
      //       //  console.log(response)
      //       //  self.BatteryEventtable=response.data

      //       self.channelStatusRecord = [];

      //       for (let item of response.data) {
      //         let attr = {};

      //         attr.create_time = item.create_time;
      //         attr.user_name = item.user_name;
      //         attr.id = item.id;
      //         if (
      //           item.event_code == 12 ||
      //           item.event_code == 13 ||
      //           item.event_code == 14
      //         ) {
      //           attr.event_content = "关闭";
      //         } else if (item.event_code == 11) {
      //           attr.event_content = "打开";
      //         } else {
      //           attr.event_content = item.event_content;
      //         }

      //         self.channelStatusRecord.push(attr);
      //       }

      //       // self.channelControlRecord  =response.data;
      //       self.channelStatusRecordkey = value.probeId;
      //     },
      //     error: (res) => {
      //       this.$message({
      //         message: res.message,
      //         type: "error",
      //       });
      //     },
      //   });
      // } else {
        ajax.get({
         url: this.$API.getProbeReportRecord +`${value.probeId}/${value.channel}`,
          
          success: (res) => {
            this.channelStatusRecord = res.data;
          },
          error: (err) => {
            console.log(err);
          },
        });
      // }
      if (value.targetCategoryId != 12) {
        ajax.get({
          url: this.$API.getProbeElectricityById +`${value.probeId}/${value.channel}`,
          
          success: (res) => {
            let list = [];
            for (let item of res.data) {
              list.push(item);
            }
            this.electricQuantityBarChartData = list;
            console.log(this.electricQuantityBarChartData)
          },
          error: (err) => {
            console.log(err);
          },
        });
      } else {
        ajax.get({
          url: this.$API.getNetLockEvent + value.probeId,
          // data: {
          //   id: value.probeId,
          // },
          success: (res) => {
    
             this.loralockeventdata=res.data
          },
          error: (err) => {
            console.log(err);
          },
        });
      }
    },
    Threechannelchannge(){
      let self = this
      ajax.get({
         url: this.$API.getProbeReportRecord +`${self.Threechannelid}/${self.Threechannel}`,
          
          success: (res) => {
            this.channelStatusRecord = res.data;
          
          },
          error: (err) => {
            console.log(err);
          },
        });
    },

    Threechannelelechannge(){
      let self = this
      ajax.get({
          url: this.$API.getProbeElectricityById +`${self.Threechanneleleid}/${self.Threechannelele}`,
          
          success: (res) => {
            let list = [];
            for (let item of res.data) {
              list.push(item);
            }
            this.electricQuantityBarChartData = list;
            console.log(this.electricQuantityBarChartData)
          },
          error: (err) => {
            console.log(err);
          },
        });
    
    },
    
    collapse(list) {
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    onMouseout(e, data) {
      this.BasicSwich = false;
    },
    onMouseover(e, data) {
      this.BasicInfo = data;
      this.BasicSwich = true;
      var floating = document.getElementsByClassName("floating")[0];

      floating.style.left = e.clientX + "px";
      floating.style.top = e.clientY + "px";
    },
    NodeClick(e, data) {
      if (e.target.tagName == "DIV" && data.type == "area") {
        this.isarea = data;

        this.isShowPlan = false;
        this.BasicSwich = false;
        this.areaCountShow1 = true;

        this.getFilialeProbesNumber(data);

        this.getFilialeHostsNumber(data);

        //this.getFilialeElectricQuantity(data);
        this.$emit("Selecttree", data.id);
      }
    },
  },
};
</script>
<style type="text/css">
.electrical_on {
  position: relative;
  -webkit-box-shadow: 1px 1px 5px 0 rgb(0 0 0 / 50%),
    0 3px 15px 0 rgb(30 144 255 / 40%) inset;
  box-shadow: 1px 1px 13px 0 rgb(26 101 239 / 95%),
    inset 0 3px 15px 0 rgb(0 125 247 / 70%);
  border: 0.01rem solid #44c7f4;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 10px;
  border-radius: 5px;
  color: #fff;
  margin-right: 0.12rem !important;
}
.electrical_off {
  -webkit-box-shadow: 1px 1px 5px 0 rgba(255, 255, 255, 0.5),
    0 3px 15px 0 rgba(255, 255, 255, 0.4) inset;
  box-shadow: 1px 1px 5px 0 rgba(255, 255, 255, 0.5),
    inset 0 3px 15px 0 rgba(255, 255, 255, 0.4);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 10px;
  border-radius: 5px;
  color: #fff;
  margin-right: 0.12rem !important;
}

/* 盒子css */
.floating {
  background: rgba(0, 0, 0, 0.7);
  width: 200px;
  height: 100px;
  position: fixed;
  color: #fff;
  padding-top: 15px;
  line-height: 20px;
  border-radius: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  left: 0;
  top: 0;
  transition: all 0.3s;
  z-index: 999;
  text-align: left;
  font-size: 12px;
}
.flowchart-row .org-tree-container {
  background: initial;
}
.flowchart-row .org-tree-node-label .org-tree-node-label-inner.myred {
  position: relative;
  -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5),
    0 3px 15px 0 rgba(30, 144, 255, 0.4) inset;
  box-shadow: 1px 1px 13px 0 rgba(26, 101, 239, 0.95),
    inset 0 3px 15px 0 rgb(0, 125, 247, 0.7);
  border: 0.01rem solid #44c7f4;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px 10px;
  border-radius: 5px;
  color: #fff;
}
.flowchart-row .org-tree-node-label .org-tree-node-label-inner {
  -webkit-box-shadow: 1px 1px 5px 0 rgba(255, 255, 255, 0.5),
    0 3px 15px 0 rgba(255, 255, 255, 0.4) inset;
  box-shadow: 1px 1px 5px 0 rgba(255, 255, 255, 0.5),
    inset 0 3px 15px 0 rgba(255, 255, 255, 0.4);
  border: 0.01rem solid #9c9c9c;
  writing-mode: rl-tb;
  text-align: center;
  cursor: pointer;
  color: #d8d8d8;
  width: 45px;
  max-width: 45px;
  padding: 15px 10px;
  box-sizing: border-box;
}
.flowchart-row .org-tree-node-btn:before {
  border-top: 1px solid #0011dc;
}
.flowchart-row .org-tree-node-btn:after {
  width: 0;
  border-left: 1px solid #0011dc;
}
.flowchart-row .org-tree-node-btn.expanded:after {
  border: none;
}
</style>

<style lang="stylus" scoped>
.area-plan {
  width: 100%;
  height: 100%;

  .header {
    position: relative;
    width: 15.09rem;
    height: 0.44rem;
    font-size: 0.16rem;
    padding: 0.14rem 0 0.13rem 0.19rem;
    background-color: #1c2961;
    box-sizing: border-box;
    border: solid 0.01rem #3696c2;
    box-shadow: 0 0 20px 0px inset rgba(30, 144, 255, 0.6);

    >span {
      margin-right: 0.42rem;
    }

    .red-color {
      color: #ff5b0c;
    }

    .blue-color {
      color: #44c7f4;
    }
  }

  .main {
    position: relative;
    width: 15.09rem;
    height: 9.45rem;
    margin-top: 0.11rem;

    .aircondition {
      position: absolute;
      top: 1.03rem;
      left: 1.85rem;
      width: 5.7rem;
      height: 4.7rem;
      background-image: linear-gradient(225deg, #1b213a 0%, #16214d 100%);
      border: solid 1px #6572a6;
      opacity: 0.9;

      .airconditon-header {
        position: relative;
        width: 100%;
        height: 0.4rem;
        margin-bottom: 0.2rem;

        .title {
          height: 0.4rem;
          margin: 0 auto;
          line-height: 0.4rem;
          text-align: center;

          span {
            padding-bottom: 0.08rem;
            border-bottom: solid 1px #6572a6;
          }

          span::before {
            content: '';
            position: absolute;
            bottom: 0.02rem;
            display: inline-block;
            border-left: 0.01rem solid #6572a6;
            height: 116%;
            -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
            -webkit-transform: rotate(-15deg);
            transform: rotate(-32deg);
          }

          span::after {
            content: '';
            position: absolute;
            bottom: 0.02rem;
            display: inline-block;
            border-left: 0.01rem solid #6572a6;
            height: 112%;
            -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
            -webkit-transform: rotate(-15deg);
            transform: rotate(32deg);
          }
        }
      }

      .condition {
        display: flex;
        justify-content: space-evenly;

        .condition-left {
          position: relative;
          width: 2.7rem;
          height: 2.26rem;
          border: solid 0.01rem #ffffff;

          .off-text {
            width: 100%;
            height: 1.49rem;
            text-align: center;
            line-height: 1.49rem;
            font-size: 0.48rem;
            color: #7a7272;
          }

          .top {
            position: relative;
            width: 100%;
            font-size: 0.72rem;
            color: #3ea7d0;
            margin-bottom: 0.15rem;

            div {
              margin-left: 0.55rem;
            }

            span {
              position: absolute;
              left: 1.45rem;
              top: 0.1rem;
              font-size: 0.36rem;
            }
          }

          .center {
            display: flex;
            justify-content: space-evenly;

            div {
              display: flex;
              flex-flow: column;
              align-items: center;
            }

            img {
              width: 0.24rem;
              height: 0.24rem;
              margin-bottom: 0.1rem;
              z-index: 10000;
            }
          }

          .bottom {
            position: absolute;
            left: 0.15rem;
            bottom: 0.21rem;
            width: 2.4rem;
            height: 0.36rem;
            background-color: #ffffff;
            border-radius: 5px;
            border: solid 1px #1e90ff;
            color: #1e90ff;
            font-size: 0.5rem;
            line-height: 0.28rem;

            span {
              cursor: pointer;
            }

            span:nth-child(1) {
              margin-left: 0.14rem;
            }

            span:nth-child(2) {
              margin-left: 1.5rem;
            }
          }
        }

        .condition-right {
          position: relative;
          width: 2.4rem;
          height: 2.26rem;
          border: solid 0.01rem #ffffff;

          ul li {
            position: relative;
            margin: 0.2rem 0 0 0.2rem;

            .reset {
              position: absolute;
              right: 0.16rem;
              color: #1e90ff;
              cursor: pointer;
            }
          }

          .refresh-data {
            position: absolute;
            right: 0.2rem;
            width: 0.88rem;
            height: 0.24rem;
            background-color: #1e90ff;
            border-radius: 0.02rem;
            text-align: center;
            padding-top: 0.04rem;
            cursor: pointer;
          }
        }
      }
    }

    .switch {
      display: flex;
      justify-content: center;
      margin-top: 0.2rem;
      margin-bottom: 0.2rem;

      div {
        display: inline-block;
      }

      div:nth-child(1) {
        width: 0.72rem;
        height: 0.36rem;
        background-color: #de5449;
        border-radius: 0.02rem;
        text-align: center;
        line-height: 0.36rem;
        cursor: pointer;
      }

      div:nth-child(2) {
        width: 0.72rem;
        height: 0.36rem;
        margin-left: 0.4rem;
        background-color: #1e90ff;
        border-radius: 0.02rem;
        text-align: center;
        line-height: 0.36rem;
        cursor: pointer;
      }
    }

    .icon-list {
      display: flex;
      justify-content: space-evenly;
      padding-top: 0.1rem;
      border-top: solid 1px #6572a6;

      .img-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.48rem;
        height: 0.48rem;
        background-color: #fff;
        border-radius: 50%;
        cursor: pointer;

        img {
          width: 0.24rem;
          height: 0.24rem;
        }
      }

      .li {
        text-align: center;

        span {
          display: block;
          margin-top: 0.12rem;
        }
      }
    }

    .icon-list::before {
      content: '';
      display: none;
    }
  }

  .switch-wrap {
    position: absolute;
    left: 7.95rem;
    top: 0.41rem;
    width: 4.16rem;
    height: 3.62rem;
    background-image: linear-gradient(225deg, #1b213a 0%, #16214d 100%);
    border: solid 1px #6572a6;
    opacity: 0.9;

    .switch-header {
      position: relative;
      width: 4.16rem;
      height: 0.4rem;

      .title {
        height: 0.4rem;
        margin: 0 auto;
        text-align: center;
        line-height: 0.4rem;

        span {
          padding-bottom: 0.08rem;
          border-bottom: solid 1px #6572a6;
        }

        span::before {
          content: '';
          position: absolute;
          bottom: 0.02rem;
          display: inline-block;
          border-left: 0.01rem solid #6572a6;
          height: 116%;
          -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
          -webkit-transform: rotate(-15deg);
          transform: rotate(-32deg);
        }

        span::after {
          content: '';
          position: absolute;
          bottom: 0.02rem;
          display: inline-block;
          border-left: 0.01rem solid #6572a6;
          height: 112%;
          -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
          -webkit-transform: rotate(-15deg);
          transform: rotate(32deg);
        }
      }
    }

    .switch-box {
      display: flex;
      justify-content: center;
      width: 3.36rem;
      height: 2.8rem;
      background-color: #3c4566;
      box-shadow: 0.01rem 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
      border-radius: 0.05rem;
      border: solid 0.01rem #ffffff;
      margin: 0 auto;
      margin-top: 0.21rem;
      padding: 0.27rem;
      box-sizing: border-box;

      &>div {
        width: 1.34rem;
        height: 2.25rem;
        background-color: #5a6799;
        border-radius: 0.05rem;
        border: solid 0.01rem #ffffff;
      }

      .left-switch {
        position: relative;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        align-items: center;
        margin-right: 0.13rem;
        background-color: #5a6799;

        .on {
          width: 75%;
          height: 0.29rem;
          background-color: #1e90ff;
          border-radius: 0.02rem;
          text-align: center;
          line-height: 0.29rem;
          cursor: pointer;
        }

        .text {
          width: 0.16rem;
        }

        .off {
          width: 75%;
          height: 0.29rem;
          background-color: #de5449;
          border-radius: 0.02rem;
          text-align: center;
          line-height: 0.29rem;
          cursor: pointer;
        }
      }

      .left-switch:nth-last-child(1) {
        margin-right: 0;
      }

      .off-switch {
        background-color: #3c4566;
      }
    }

    .value1 {
      position: absolute;
      bottom: -0.22rem;
    }

    .value2 {
      position: absolute;
      right: 1.08rem;
      bottom: 0.23rem;
    }
  }

  .light {
    position: absolute;
    left: 8.1rem;
    bottom: 1.4rem;
    width: 5.5rem;
    height: 3.62rem;
    background-image: linear-gradient(225deg, #1b213a 0%, #16214d 100%);
    border: solid 0.01rem #6572a6;
    opacity: 0.9;

    .light-header {
      position: relative;
      width: 100%;
      height: 0.4rem;

      .title {
        height: 0.4rem;
        margin: 0 auto;
        text-align: center;
        line-height: 0.4rem;

        span {
          padding-bottom: 0.08rem;
          border-bottom: solid 1px #6572a6;
        }

        span::before {
          content: '';
          position: absolute;
          bottom: 0.02rem;
          display: inline-block;
          border-left: 0.01rem solid #6572a6;
          height: 116%;
          -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
          -webkit-transform: rotate(-15deg);
          transform: rotate(-32deg);
        }

        span::after {
          content: '';
          position: absolute;
          bottom: 0.02rem;
          display: inline-block;
          border-left: 0.01rem solid #6572a6;
          height: 112%;
          -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
          -webkit-transform: rotate(-15deg);
          transform: rotate(32deg);
        }
      }
    }

    .light-main {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 2.26rem;
      margin-top: 0.2rem;

      .img-box {
        left: 0.42rem;
        bottom: 0.08rem;
        width: 1.91rem;
        height: 1.91rem;
      }

      .light-info {
        position: relative;
        flex-flow: column;
        right: 0.2rem;
        width: 2.4rem;
        height: 100%;
        margin-left: 0.67rem;
        border: solid 0.01rem #ffffff;

        div {
          position: relative;
          margin: 0.2rem 0 0 0.2rem;

          span {
            position: absolute;
            right: 0.2rem;
            color: #1e90ff;
            cursor: pointer;
          }
        }

        .refresh {
          position: absolute;
          right: 0.2rem;
          bottom: 0.08rem;
          width: 0.88rem;
          height: 0.24rem;
          background-color: #1e90ff;
          border-radius: 0.02rem;
          text-align: center;
          line-height: 0.24rem;
          cursor: pointer;
        }
      }
    }

    .linght-switch {
      position: absolute;
      bottom: 0.2rem;
      align-items: center;
      justify-content: center;
      display: flex;
      width: 100%;
      height: 0.36rem;
      line-height: 0.36rem;
      text-align: center;

      .on, .off {
        width: 0.72rem;
        height: 0.36rem;
        margin-right: 0.4rem;
        background-color: #de5449;
        border-radius: 0.02rem;
        cursor: pointer;
      }

      .on {
        margin-right: 0;
        background-color: #1e90ff;
      }
    }
  }

  .change-icon {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.36rem;
    height: 0.36rem;
    background-color: #16214d;
    border-radius: 0.05rem;
    cursor: pointer;
    opacity: 0.7;

    img {
      width: 0.2rem;
      height: 0.22rem;
    }
  }

  .area-plan-img-box {
    width: 100%;
    height: 100%;
  }

  .btn {
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    top: 0.4rem;
    left: 0.4rem;
    width: 6rem;
    height: 0.6rem;
    background-color: #5a6799;
    border-radius: 0.1rem;
  }
}

.close {
  position: absolute;
  top: 0.12rem;
  right: 0.2rem;
  width: 0.17rem;
  height: 0.17rem;
  cursor: pointer;
  z-index: 1;
}

.tl-corner {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  left: -0.01rem;
  top: -0.01rem;
  border-top: 0.01rem solid #fff;
  border-left: 0.01rem solid #fff;
}

.tr-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  right: -0.01rem;
  top: -0.01rem;
  border-top: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}

.bl-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  left: -0.01rem;
  bottom: -0.01rem;
  border-bottom: 0.01rem solid #fff;
  border-left: 0.01rem solid #fff;
}

.br-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  right: -0.01rem;
  bottom: -0.01rem;
  border-bottom: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}

.current-status-color {
  background-color: #937d7c !important;
  cursor: not-allowed !important;
}

.add-or-sub-box-not-allowed {
  background-color: #937d7c !important;
  cursor: not-allowed !important;
}

.add-or-sub-not-allowed {
  color: #b19fbd !important;
  cursor: not-allowed !important;
}

.probe-icon-name-box {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.probe-name {
  padding: 0.04rem 0.08rem;
  background-color: #fff;
  margin-top: 0.15rem;
  color: #000;
  border: solid 0.01rem #999999;
  border-radius: 0.02rem;
  transform: translate(-34%, 0%);
  cursor: pointer;
}

.probe-icon-name-box {
  >>>.el-select {
    margin-top: 0.07rem;
    transform: translate(-38%, 22%);
  }

  >>>.el-input--suffix .el-input__inner {
    width: 1.82rem;
    height: 0.3rem;
    padding-left: 0.08rem;
    padding-right: 0 !important;
    border-radius: 0.02rem;
    color: #000;
    font-size: 0.16rem;
  }

  >>>.el-icon-arrow-up:before {
    content: '\e78f' !important;
  }

  >>>.el-select .el-input .el-select__caret {
    font-size: 0.22rem;
  }

  >>>.el-select .el-input__suffix {
    color: #999;
    top: 0.02rem;
    right: 0.09rem;
  }

  >>>.whole-rel {
    margin-top: 0 !important;
  }

  >>>.el-input__icon {
    height: unset;
    width: unset;
    text-align: unset;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    line-height: unset;
  }

  >>>.el-select:hover .el-input__inner {
    border-color: #1e90ff;
  }
}

.on-off-line {
  position: absolute;
  right: 0.04rem;
  color: #e95858;
  font-size: 0.1rem;
}

.online-green-color {
  color: green;
}

.no-img-url {
  position: relative;
  display: -webkit-box;
  justify-content: center;
  height: 9.45rem;
  margin-top: 0.11rem;
  width: 100%;
  background-color: #1c2961;
  overflow: auto;
}

.organ-info {
  width: 100%;
  height: calc(100% - 3.35rem);
}

.datalist-pile-table {
  width: calc(100% - 5.69rem);
  position: relative;
}

.content-bottom {
  height: 3.25rem;
  display: flex;
  margin-top: 0.1rem;

  .left {
    display: flex;
  }

  justify-content space-between {
    position: relative;
  }

  .device-statistics-section {
    width: 4.6rem;

    height 100% {
      .appliance-statistics-section {
        width: 4.6rem;
        height: 100%;
      }

      .appliance-runtime-section {
        width: 5.7rem;
        height: 100%;
      }

      .appliance-switchtimes-section {
        width: 5.7rem;
        height: 100%;
      }
    }
  }

  .probe-number-chart, .electric-appliance-chart, .electricity-quantity-chart {
    position: relative;
    height: 3.25rem;
    width: 4.59rem;
    margin-right: 0.1rem;
    float: left;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5), 0 3px 15px 0 rgba(30, 144, 255, 0.4) inset;
    background-image: linear-gradient(
      30deg,
      rgba(22, 33, 77, 0.7) 0%,
      rgba(31, 47, 109, 0.7) 100%
    );
    border: solid 0.01rem #44c7f4;
    box-sizing: border-box;
  }

  .probe-number-chart {
    width: 4.59rem;
  }

  .electric-appliance-chart {
    width: 4.55rem;
  }

  .datalist-pile-table .probe-number-chart {
    width: auto;
    position: absolute;
    left: 0;
    right: 50%;
  }

  .datalist-pile-table .electric-appliance-chart {
    width: auto;
    position: absolute;
    right: 0;
    left: 50%;
  }

  .datalist-pile-table .probe-number-BatteryEventtable.probe-number-chart {
    width: auto;
    position: absolute;
    left: 0;
    right: 0;
  }

  .electricity-quantity-chart {
    width: 5.69rem;
    margin-right: 0;
  }
}

>>>.userprobe-number-table.el-table thead.is-group th {
  background: #1e3385;
}

.area-plan .change-icon.electrical_icon {
  top: 0.04rem;
  right: 0.14rem;
}
</style>
